<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 200px;
        height: 200px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <!-- <div id="box" title="张三" class="aa" aa="bb"></div>
    <p>123</p> -->
    <button id="box" data-id="box1" data-aa="year">年</button>
    <button data-aa="month">月</button>
    <button data-aa="day">日</button>
    <script src="js/jquery.min.js"></script>
    <script>
      // 后来，js定制了一个标准， 对于所有的自定义属性，推荐大家以 data-开头
      // 每一个dom对象也新增了一个属性 dataset属性，通过dataset属性可以直接获取标签上所有的自定义属性（自定义属性以data-)

      // jq中提供了三个方法
      // attr:  内部实现  getAttribute   attr可以用于操作自定义属性
      // prop:  只能用于操作固有的属性  checked disabled
      // data   :只能操作data-开头的属性 等价于dataset
      // console.log($('button').eq(0).attr('id'))
      // console.log($('button').eq(0).prop('id'))
      console.log($('button').eq(0).attr('data-id'))
      console.log($('button').eq(0).data('id'))

      // const button = document.querySelector('button')
      // console.log(button.id)
      // console.log(button.dataset.id)
      // console.log(button.dataset.aa)

      /* 
        {
          className: 'aa'
        }

        js提供了语法： attribute 直接操作标签的属性
      */
      // const div = document.querySelector('div')
      // console.log(div.getAttribute('aa'))
      // console.log(div.getAttribute('id'))
      // console.log(div.getAttribute('class'))

      // 标签为什么要有自定义属性
      // 因为自定义属性可以存储一些额外的信息

      // console.log(div.id)
      // console.log(div.title)
      // console.log(div.className)
      // console.log(div.aa)

      // html标签来说， 有一些属性是标准的，固有的属性  id title class
      // 除了固有的属性，还有自定义属性

      // DOM: 文档对象模型
      // 浏览器的工作原理
      // 浏览器 内部有一个 渲染引擎（浏览器的内核） 可以解析html和css

      // 1. 渲染引擎会解析 html结构  形成 DOM树
      //    同时渲染引擎会解析 css样式， 形成一个css规则表

      // 2. DOM树和css规则结合  形成一颗 渲染树  样式
      // 3. 对渲染树进行布局
      // 4. 绘制渲染树
    </script>
  </body>
</html>
